<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #biao {
            border: 2px solid black;
            width: 1000px;


        }

        #biao td {
            border: 1px solid black;
            text-align: center;
        }

        #biao th {
            height: 50px;
        }

        #add{
            width: 320px;
            height: 500px;
            background-color: blanchedalmond;
            display: none;
            margin: 0 auto;
            z-index: 5;
            display: flex;
            flex-wrap: wrap;
            padding-top: 40px;
            padding-left: 20px;

        }
        input{
            height: 30px;
        }

        #abc{
            margin-left: 500px;
        }

    </style>
</head>

<body>
    <table id="biao">
        <tr>
            <th>商品ID</th>
            <th>商品照片</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>创建时间</th>
            <th>库存</th>
            <th>详情</th>
            <th>操作</th>
        </tr>

        
    </table>
    <div id="add">
            商品照片：<input type="text" id="zp">
            商品名称：<input type="text" id="mz">
            商品单价：<input type="text" id="jg">
            商品日期：<input type="text" id="sj">
            商品库存：<input type="text" id="kc">
            商品详情：<input type="text" id="xq">
           
        </div> 
        <button onclick="addd()" id="abc">新增</button>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            data: {
                goodsPhoto: $("#goodsPhoto").val(),
                goodsName: $("#goodsName").val(),
                goodsPrice: $("#goodsPrice").val(),
                goodsCreationTime: $("#goodsCreationTime").val(),
                goodsInventory: $("#goodsInventory").val(),
                goodsdetail: $("#goodsdetail").val(),

            },
            success: function (nihao) {
                console.log(nihao)
                let arr = nihao.data
                arr.forEach(element => {
                    let a = "";
                    a = `
                        <tr>
             <td>${element.goodsId}</td>
             <td>${element.goodsPhoto}</td>
             <td>${element.goodsName}</td>
             <td>${element.goodsPrice}</td>
             <td>${element.goodsCreationTime}</td>
             <td>${element.goodsInventory}</td>
             <td>${element.goodSdetail}</td>
             <td>
                <button onclick="del(${element.goodsId})">删除</button>
                </td>
        </tr>
                        `
                    $("#biao").append(a)
                });
            }
        })
        $("#add").hide()
        function addd(){
            $("#add").show()
        $.ajax({
            url: "http://172.16.106.87:8080/addGoods",
            type: "post",
            data:{
                goodsPhoto:$("#zp").val(),
                goodsName:$("#mz").val(),
                goodsPrice:$("#jg").val(),
                goodsCreationTime:$("#sj").val(),
                goodsInventory:$("#kc").val(),
                goodSdetail:$("#xq").val()
            },
            success: function (edit) {
                alert(edit)
            }
        })
    }
        
        function del(userId){
            $.ajax({
            url: "http://172.16.106.87:8080/delGoods",
            type: "get",
            data:{

                id: userId
            },
            success: function (Del) {

                console.log(Del)
            }
        })
        location.reload()
    }

    </script>
</body>

</html>